<template>
    <div>
        <el-row type="flex" justify="end" :gutter="10" class="progress-row">
            <el-col :span="20">
                <el-progress :percentage="percentage" :show-text="false" color="#b81c22"></el-progress>
            </el-col>
            <el-col :span="2">
                <span class="step-num">{{ stepNum + 1 }}/{{ totalStep }}</span>
            </el-col>
        </el-row>
        <div class="btn">
            <el-button size="medium" v-if="stepNum > 0" @click="handlePrevStep">上一步</el-button>
            <el-button size="medium" class="next-btn" type="primary" :loading="nextStepLoading" @click="handleNextStep">
                {{ nextButtonTitle }}
            </el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'FooterPage',
    props: {
        stepNum: Number,
        totalStep: Number,
        nextStepLoading: {
            type: Boolean,
            default: false
        },
        changeStep: Function,
    },
    computed: {
        percentage() {
            return (this.stepNum + 1) / this.totalStep * 100
        },
        nextButtonDisabled(){
            return this.stepNum >= (this.totalStep - 1)
        },
        nextButtonTitle(){
            let title = "下一步";
            if(this.stepNum == (this.totalStep - 1)){
                 title = "完成学习";
            }
            return title;
        },
    },
    methods: {
        handlePrevStep() {
            this.$emit("changeStep", this.stepNum - 1)
        },
        handleNextStep() {
            if (this.stepNum < (this.totalStep - 1)){
                this.$emit("changeStep", this.stepNum + 1)
            }
        }
    }
}
</script>

<style  scoped>
.progress-row {
    padding-top: 20px;
}

.step-num {
    position: relative;
    bottom: 8px;
}

.btn {
    text-align: right;
    margin-right: 10px;
}

.btn .next-btn {
  width: 96px;
}

.el-button--primary {
  background-color: #b81c22;
  border-color: #b81c22;
}

.el-button--primary:hover,.el-button--primary:focus {
    background-color: #ca7570;
    border-color: #ca7570;
}

.el-button--default:hover,.el-button--default:focus {
    background-color: #fff;
    border-color: #b81c22;
    color: #b81c22;
}
</style>